<template>
	<view class="category-box">
		<view class="category-box" v-if="categoryId ===17">
		<view class="content">
					<view
						class=""
						style="height: 40rpx; background-color: #E9B562;"
					></view>
					<view class="positioning flex align-center">
						<text>定位不准点击选择地址</text>
					</view>
					<view class="gongge flex justify-around">
						<view
							class="info flex flex-direction  justify-center align-center"
						>
							<image
								src="../../static/imgs/weihuobang3.png"
								mode=""
							></image>
							<text>门店消息</text>
						</view>
						<view
							class="info flex flex-direction  justify-center align-center"
						>
							<image
								src="../../static/imgs/weihuobang1.png"
								mode=""
							></image>
							<text>订单</text>
						</view>
						<view
							class="info flex flex-direction  justify-center align-center"
						>
							<image
								src="../../static/imgs/weihuobang2.png"
								mode=""
							></image>
							<text>搜索</text>
						</view>
					</view>
					
				</view>
			
				<!-- 三级分类 -->
				<sh-three-catgory :categoryId="categoryId" v-if="categoryType === 4"></sh-three-catgory>
				<!-- 二级分类 -->
				<sh-two-catgory :categoryId="categoryId" v-if="categoryType === 3"></sh-two-catgory>
				<!-- 一级分类-->
				<sh-one-catgory :categoryId="categoryId" v-if="categoryType === 2"></sh-one-catgory>
				<!--直接购买，点餐 -->
				<sh-takeout-catgory :categoryId="categoryId" v-if="categoryType === 1"></sh-takeout-catgory>
				<!-- 自定义底部导航 -->
				<shopro-tabbar v-if="queryObj.id" :queryObj="queryObj"></shopro-tabbar>
				<!-- 关注弹窗 -->
				<shopro-float-btn></shopro-float-btn>
				<!-- 连续弹窗提醒 -->
				<shopro-notice-modal></shopro-notice-modal>
				<!-- 登录提示 -->
				<shopro-login-modal></shopro-login-modal>
			
		</view>
		
		<view class="category-box" v-else>
			<!-- 三级分类 -->
			<sh-three-catgory :categoryId="categoryId" v-if="categoryType === 4"></sh-three-catgory>
			<!-- 二级分类 -->
			<sh-two-catgory :categoryId="categoryId" v-if="categoryType === 3"></sh-two-catgory>
			<!-- 一级分类-->
			<sh-one-catgory :categoryId="categoryId" v-if="categoryType === 2"></sh-one-catgory>
			<!--直接购买，点餐 -->
			<sh-takeout-catgory :categoryId="categoryId" v-if="categoryType === 1"></sh-takeout-catgory>
			<!-- 自定义底部导航 -->
			<shopro-tabbar v-if="queryObj.id" :queryObj="queryObj"></shopro-tabbar>
			<!-- 关注弹窗 -->
			<shopro-float-btn></shopro-float-btn>
			<!-- 连续弹窗提醒 -->
			<shopro-notice-modal></shopro-notice-modal>
			<!-- 登录提示 -->
			<shopro-login-modal></shopro-login-modal>
		</view>
	</view>
</template>

<script>
import shTakeoutCatgory from './components/category/sh-takeout-catgory.vue';
import shThreeCatgory from './components/category/sh-three-catgory.vue';
import shTwoCatgory from './components/category/sh-two-catgory.vue';
import shOneCatgory from './components/category/sh-one-catgory.vue';
export default {
	components: {
		shTakeoutCatgory,
		shThreeCatgory,
		shTwoCatgory,
		shOneCatgory
	},
	data() {
		return {
			categoryType: 0, //1:快速购买,2:一级分类，3:二级分类，4:三级分类
			categoryId: 0 ,//分类Id
			queryObj:{}
		};
	},
	computed: {},
	onLoad(options) {
		this.queryObj = options;
		this.getCategory();
		this.categoryId = Number(this.$Route.query.id);
		console.log('this.categoryId :>> ', this.categoryId);
	},
	methods: {
		/**
		 * 获取分类数据
		 *  type4:三级分类， type3:二级分类 ,type2:一级分类,type1:快速购买
		 */
		getCategory() {
			this.$api('category', {
				id: this.$Route.query.id
			}).then(res => {
				console.log('res :>> ', res);
				if (res.code === 1) {
					console.log('this.categoryType :>> ', this.categoryType);
					this.categoryType = parseInt(res.data.type);
					uni.setNavigationBarTitle({
						title: res.data.name
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.category-box {
	height: 100%;
	flex: 1;
	overflow: hidden;
}
.content {	.positioning {
		width: 750rpx;
		height: 50rpx;
		background: #ac8648;

		text {
			height: 23rpx;
			line-height: 23rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
	.gongge {
		width: 100vw;
		height: 170rpx;
		background-color: #e9b562;
		.info {
			image {
				width: 80rpx;
				height: 68rpx;
				margin-bottom: 10rpx;
			}
			text {
				height: 23rpx;
				line-height: 23rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
	.shopp{
		width: 100vw;
		height: 600rpx;
		border-radius: 30rpx !important;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		//margin-top: -10rpx;
		.u-tab-view{
			
			width: 207rpx;
			//background-color: #F5F5F5;
			.u-tab-item{
				height: 77rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					line-height: 24rpx;
					height: 24rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #333333;

				}
			}
			.u-tab-item-active{
				background-color: #fff;
				text{
					color: #E8A36C;
				}
			}
		}
	}
}


</style>
